<template>
  <ClientOnly>
    <div class="confirm-page">
      <div
        v-if="isLoading"
        class="_loading"
      />

      <template v-if="!isLoading && !isError">
        <h1>{{ t('auth.success_registration') }}!</h1>
      </template>

      <template v-if="!isLoading && isError">
        <h1>{{ t('auth.failure_confirm_registration') }}!</h1>
      </template>

      <NuxtLink
        v-if="!isLoading"
        :to="generateLink('/')"
      >
        <UiBtn theme="primary">{{ t('navigation.back_to_main_page')}}</UiBtn>
      </NuxtLink>
    </div>
  </ClientOnly>
</template>

<script setup lang="ts">
import { AuthorizationApiService } from '../../../services/api/authorization.service';

const { t } = useI18n();
const { generateLink } = useGenerateLink();

useNoindex();

const isLoading = ref(true);
const isError = ref(false);

async function checkToken() {
  const token = useRoute().params.token;

  if (!token) {
    isError.value = true;
    isLoading.value = false;
    return;
  }

  try {
    await AuthorizationApiService.confirmRegistration(String(token));
  } catch (e) {
    isError.value = true;
    console.error(e);
  } finally {
    isLoading.value = false;
  }
}

onMounted(() => {
  if (window) {
    checkToken();
  }
});

const pagePureName = useGetPureRouteName();
const { meta } = useMeta({ t, pageKey: pagePureName, brandName: useAppConfig().brandName });

watchEffect(() => {
  useHead(meta.value);
});
</script>

<style lang="scss">
.confirm-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  text-align: center;

  h2 {
    @include font-base;

    font-weight: 700;
  }
}
</style>
